<template>
  <el-dialog
    :model-value="show"
    title="申请详情"
    width="800px"
    append-to-body
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
    class="dynamics-dialog"
  >
    <el-tabs type="border-card" class="dynamics-tabs">
      <el-tab-pane label="申请内容">
        <DynamicsForm
          ref="DynamicsFormRef_1"
          :api="companyApplicationForm_detail"
          :params="formParams"
        />
      </el-tab-pane>
      <!-- 已完成tab显示 -->
      <el-tab-pane v-if="activeTab == 4" label="处理结果">
        <DynamicsForm
          ref="DynamicsFormRef_2"
          :api="companyApplicationHandleDetail"
          :params="formParams_2"
        />
      </el-tab-pane>
      <el-tab-pane label="申请记录">
        <ApplyHistory :activeRow="activeRow" />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <!-- 已驳回 -->
      <el-button v-if="activeTab == 2" type="primary" @click="editApply">
        重新填写
      </el-button>
      <!-- 待处理 || 已驳回 -->
      <el-button
        v-if="activeTab == 1 || activeTab == 2"
        type="primary"
        @click="cancelApply"
      >
        取消申请
      </el-button>
      <el-button type="info" @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import DynamicsForm from '@/components/DynamicsForm';
import ApplyHistory from '@/components/ApplyHistory';
import {
  companyApplicationCancel,
  companyApplicationForm_detail,
  companyApplicationHandleDetail
} from '@/api/resources';
import { ElMessageBox } from 'element-plus';

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  activeTab: {
    type: Number,
    default: 0
  },
  activeRow: {
    type: Object,
    default: () => {}
  }
});
const emit = defineEmits(['success', 'update:show', 'editApply']);

const formParams = computed(() => {
  return { id: props.activeRow.id, view_type: 1 }; // 1 纯展示详情
});
const formParams_2 = computed(() => {
  return { id: props.activeRow.id, view_type: 1 };
});
const DynamicsFormRef_1 = ref();
const DynamicsFormRef_2 = ref();

// 关闭
function handleClose() {
  emit('update:show', false);
}

// 取消申请
function cancelApply() {
  ElMessageBox({
    dangerouslyUseHTMLString: true,
    title: '取消申请确认',
    message:
      '请确认是否取消申请？<br>取消申请后，该申请不会被接收且会变为已取消状态',
    type: 'warning',
    showCancelButton: true,
    beforeClose: (action, instance, done) => {
      if (action !== 'confirm') return done();
      instance.confirmButtonLoading = true;
      companyApplicationCancel({ id: props.activeRow.id })
        .then(() => done())
        .finally(() => (instance.confirmButtonLoading = false));
    }
  }).then(() => {
    $msg.success('已取消该申请');
    handleClose();
    emit('success');
  });
}

function editApply() {
  emit('editApply');
}

// 初始化表单
watch(
  () => props.show,
  async val => {
    if (!val) return;
    await nextTick();
    DynamicsFormRef_1.value?.initFormList();
    DynamicsFormRef_2.value?.initFormList();
  }
);
</script>

<style lang="scss" scoped></style>
